import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import {  Icon} from 'weaver-mobile';
import _ from "lodash";

@inject('smsRadioStore')
@withRouter
@observer
export default class SmsDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  componentDidMount() {
    const { smsRadioStore } = this.props;
    const { getSmsDetailByBroadcastid } = smsRadioStore;

    let param = this.props.history.location.search
    let id = param.substring(4, 12)
    getSmsDetailByBroadcastid(id)
  }

   //渲染流程业务数据  
   renderWorkFlowBiz = () => {
    const { smsRadioStore } = this.props;
    const { workFlowBiz } = smsRadioStore;

    if (workFlowBiz) {
      return workFlowBiz.map((val, index) => {
        let valHtml = `<a contenteditable='false' onclick="window.openLink('/common/chatResource/view.html?resourcetype=0&resourceid=${val.bizid}&isfromchatshare=1&sharer=${val.bizcreater}&em_client_type=1')"` +
          'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px">' +
          `${val.bizname}</a>&nbsp;</br>`;
        return (
          <div key={index} className={index == 0 ? "container-content-Workflow" : "container-content-Workflow-n"} dangerouslySetInnerHTML={{ __html: valHtml }}></div>
        );
      })
    }
  }
  //渲染文档业务数据  
  renderDocBiz = () => {
    const { smsRadioStore } = this.props;
    const { docBiz } = smsRadioStore;

    if (docBiz) {
      return docBiz.map((val, index) => {
        let valHtml = `<a contenteditable='false' onclick="window.openLink.openDocument(${val.bizid})"` +
          'href="javascript:void(0);" unselectable="off" contenteditable="false"' +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px">' +
          `${val.bizname}</a>&nbsp;</br>`;
        return (
          <div key={index} className={index == 0 ? "container-content-Workflow" : "container-content-Workflow-n"} dangerouslySetInnerHTML={{ __html: valHtml }}></div>
        );
      })
    }

  }
  //渲染附件业务数据  
  renderFileBiz = () => {
    const { smsRadioStore } = this.props;
    const { fileBiz } = smsRadioStore;

    if (fileBiz) {
      return fileBiz.map((val, index) => {
        let valHtml = `<a onclick="window.openLink.openDocument(${val.bizid})" unselectable="off"` +
          'style="cursor:pointer;text-decoration:none !important;margin-right:8px"' +
          `href="javascript:void(0);" contenteditable="false">${val.bizname}</a>&nbsp;<a unselectable='off' contenteditable='false'` +
          `href='javascript:try{downloadFile(\"${val.loadlink}\","${val.bizid}")}catch(e){window.open(\"${val.loadlink}\")}' ` +
          `style='cursor:pointer;text-decoration:none;margin-right:8px'>下载(${val.filesize})</a>&nbsp;</br>`;
        return (
          <div key={index} className={index == 0 ? "container-content-Workflow" : "container-content-Workflow-n"} dangerouslySetInnerHTML={{ __html: valHtml }}></div>
        );
      })
    }
  }

  render() {
    const { smsRadioStore } = this.props;
    const { detailItem,workFlowBiz, docBiz, fileBiz } = smsRadioStore;

    return (
      <div style={{ background: 'white', height: '100%', width: '100%', overflow: 'auto' }}>
        <div className="sms-radio-dialog-container">
          <div className="container-head">
            <div className="container-title">{detailItem.title}</div>
            <div className="container-info">
              <div className="container-sendInfo">
                <span>{detailItem.creater}</span>
                <span className="container-time">{detailItem.createdate}  {detailItem.createtime}</span>
              </div>
            </div>
          </div>
          <div className="container-content" dangerouslySetInnerHTML={{ __html: detailItem.contexts }}></div>
          <div className="container-content" style={{ display: fileBiz.length > 0 ? 'block' : 'none' }}>
            <Icon key="enclosure-1" type="enclosure-1" size="xxs" />
            {this.renderFileBiz()}
          </div>
          <div className="container-content" style={{ display: docBiz.length > 0 ? 'block' : 'none' }}>
            <Icon key="file" type="file" size="xxs" />
            {this.renderDocBiz()}
          </div>
          <div className="container-content" style={{ display: workFlowBiz.length > 0 ? 'block' : 'none' }}>
            <Icon key="flow" type="flow" size="xxs" />
            {this.renderWorkFlowBiz()}
          </div>
        </div>
      </div>
    )
  }
}